<p>Trilium allows you to share selected notes as <strong>publicly accessible</strong> read-only
  documents. This feature is particularly useful for publishing content directly
  from your Trilium notes, making it accessible to others online.</p>
<figure
class="image">
  <img style="aspect-ratio:1144/660;" src="Sharing_image.png" width="1144"
  height="660">
  </figure>
  
<h2>Features, interaction and limitations</h2>
  <ul>
    <li>Searching by note title.</li>
    <li>Automatic dark/light mode based on the user's browser settings.</li>
    <li>Mobile-friendly layout, with sidebar.</li>
    <li>Collapsible tree with the same note icons as the application.</li>
    <li>Customizable logo.</li>
    <li>Toggle button for dark/light mode, which also stores the user preferences.</li>
    <li>Quick navigation buttons (previous and next note).</li>
    <li>Displaying the date of the last update of the note.</li>
  </ul>
  <h3>By note type</h3>
  <table class="ck-table-resized">
    <colgroup>
      <col style="width:19.92%;">
        <col style="width:41.66%;">
          <col style="width:38.42%;">
    </colgroup>
    <thead>
      <tr>
        <th>&nbsp;</th>
        <th>Supported features</th>
        <th>Limitations</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th><a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>
        </th>
        <td>
          <ul>
            <li data-list-item-id="e26b4ce9ba4e9dfe224d04e0f341925ed">Table of contents.</li>
            <li data-list-item-id="e9707fdfa2c92d66690cf932f7e647253">Syntax highlight of code blocks, provided a language is selected (does
              not work if “Auto-detected” is enabled).</li>
            <li data-list-item-id="e84420a10c6d64bd107edb6e867c91d4b">Rendering for math equations.</li>
            <li data-list-item-id="e10834dcd0619d77ae2e94d3695bedf58"><a href="#root/_help_nBAXQFj20hS1">Including notes</a> (only if the included
              notes are also shared).</li>
          </ul>
        </td>
        <td>
          <ul>
            <li data-list-item-id="e41cc4139377f9f88d653d1eb8ca47bb4">Inline Mermaid diagrams are not rendered.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>
        </th>
        <td>
          <ul>
            <li data-list-item-id="e291ae6d5130677b4c99f7c3bdbe974b4">Basic support (displaying the contents of the note in a monospace font).</li>
          </ul>
        </td>
        <td>
          <ul>
            <li data-list-item-id="e0270680bbdd7a129306e61e11691e36d">No syntax highlight.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_m523cpzocqaD">Saved Search</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_iRwzGnHPzonm">Relation Map</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_bdUJEHsAPYQR">Note Map</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>
        </th>
        <td>
          <ul>
            <li data-list-item-id="ea031e1d4149eb443ace756234490c5a4">The child notes are displayed in a fixed format.&nbsp;</li>
          </ul>
        </td>
        <td>
          <ul>
            <li data-list-item-id="ea4a9d424aec2afbaecc07bbf64b7bebd">More advanced view types such as the calendar view are not supported.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>
        </th>
        <td>
          <ul>
            <li data-list-item-id="e582d283f2b1b30cbe5ae35d8e01b2bf2">The diagram is displayed as a vector image.</li>
          </ul>
        </td>
        <td>
          <ul>
            <li data-list-item-id="e33268686446e3c217077201bb5964364">No further interaction supported.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>
        </th>
        <td>
          <ul>
            <li data-list-item-id="e443dd0e97c30cb12c77e8906a71569ea">The diagram is displayed as a vector image.</li>
          </ul>
        </td>
        <td>
          <ul>
            <li data-list-item-id="efe151ef3f3826c825416417525fb5fb2">No further interaction supported.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_1vHRoWCEjj0L">Web View</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>
        </th>
        <td>The diagram is displayed as a vector image.</td>
        <td>
          <ul>
            <li data-list-item-id="ed3b4fb473042f6e32b4502d4fa11a767">No further interaction supported.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map View</a>
        </th>
        <td>Not supported.</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th><a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>
        </th>
        <td>Basic interaction (downloading the file).</td>
        <td>
          <ul>
            <li data-list-item-id="ed87e836a39d127ebcbb33e9e59045afb">No further interaction supported.</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
  <p>While the sharing feature is powerful, it has some limitations:</p>
  <ul>
    <li><strong>Code Notes</strong>: No syntax highlighting.</li>
    <li><strong>Static Note Tree</strong>
    </li>
    <li><strong>Protected Notes</strong>: Cannot be shared.</li>
    <li><strong>Include Notes</strong>: Not supported.</li>
  </ul>
  <p>Some of these limitations may be addressed in future updates.</p>
  <h2>Prerequisites</h2>
  <p>To use the sharing feature, you must have a&nbsp;<a class="reference-link"
    href="#root/_help_WOcw2SLH6tbX">Server Installation</a>&nbsp;of Trilium.
    This is necessary because the notes will be hosted from the server.</p>
  <h2>Sharing a note</h2>
  <ol>
    <li>
      <p><strong>Enable Sharing</strong>: To share a note, toggle the <code>Shared</code> switch
        within the note's interface. Once sharing is enabled, an URL will appear,
        which you can click to access the shared note.</p>
      <p>
        <img src="Sharing_share-single-note.png" alt="Share Note">
      </p>
    </li>
    <li>
      <p><strong>Access the Shared Note</strong>: The link provided will open the
        note in your browser. If your server is not configured with a public IP,
        the URL will refer to <code>localhost (127.0.0.1)</code>.</p>
    </li>
  </ol>
  <h2>Sharing a note subtree</h2>
  <p>When you share a note, you actually share the entire subtree of notes
    beneath it. If the note has child notes, they will also be included in
    the shared content. For example, sharing the "Formatting" subtree will
    display a page with basic navigation for exploring all the notes within
    that subtree.</p>
  <h2>Viewing and managing shared notes</h2>
  <p>You can view a list of all shared notes by clicking on "Show Shared Notes
    Subtree" in the&nbsp;<a class="reference-link" href="#root/_help_x3i7MxGccDuM">Global menu</a>.
    This allows you to manage and navigate through all the notes you have made
    public.</p>
  <h2>Security considerations</h2>
  <p>Shared notes are published on the open internet and can be accessed by
    anyone with the URL. The URL's randomness does not provide security, so
    it is crucial not to share sensitive information through this feature.</p>
  <h3>Password protection</h3>
  <p>To protect shared notes with a username and password, you can use the <code>#shareCredentials</code> attribute.
    Add this label to the note with the format <code>#shareCredentials="username:password"</code>.
    To protect an entire subtree, make sure the label is <a href="#root/_help_bwZpz2ajCEwO">inheritable</a>.</p>
  <h2>Advanced sharing options</h2>
  <h3>Customizing the appearance of shared notes</h3>
  <p>The default design should be a good starting point, but you can customize
    it using your own CSS:</p>
  <ul>
    <li><strong>Custom CSS</strong>: Link a CSS&nbsp;<a class="reference-link"
      href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note to the shared page by
      adding a <code>~shareCss</code> relation to the note. If you want this style
      to apply to the entire subtree, make the label inheritable. You can hide
      the CSS code note from the tree navigation by adding the <code>#shareHiddenFromTree</code> label.</li>
    <li><strong>Omitting Default CSS</strong>: For extensive styling changes,
      use the <code>#shareOmitDefaultCss</code> label to avoid conflicts with Trilium's
      <a
      href="#root/_help_Wy267RK4M69c">default stylesheet</a>.</li>
  </ul>
  <h3>Adding JavaScript</h3>
  <p>You can inject custom JavaScript into the shared note using the <code>~shareJs</code> relation.
    This allows you to access note attributes or traverse the note tree using
    the <code>fetchNote()</code> API, which retrieves note data based on its
    ID.</p>
  <h3>Adding custom HTML</h3>
  <p>You can inject custom HTML snippets into specific locations of the shared
    page using the <code>~shareHtml</code> relation. The HTML note should contain
    the raw HTML content you want to inject, and you can control where it appears
    by adding the <code>#shareHtmlLocation</code> label to the HTML snippet note
    itself.</p>
  <p>The <code>#shareHtmlLocation</code> label accepts values in the format <code>location:position</code>:</p>
  <ul>
    <li><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
    </li>
    <li><strong>Positions</strong>: <code>start</code>, <code>end</code>
    </li>
  </ul>
  <p>For example:</p>
  <ul>
    <li><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
      of the <code>&lt;head&gt;</code> section</li>
    <li><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
      (default)</li>
    <li><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
      of the <code>&lt;body&gt;</code> section</li>
    <li><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
      of the content area</li>
    <li><code>#shareHtmlLocation=content:end</code> - Injects HTML at the end of
      the content area</li>
  </ul>
  <p>If no location is specified, the HTML will be injected at <code>content:end</code> by
    default.</p>
  <p>Example:</p><pre><code class="language-application-javascript-env-backend">const currentNote = await fetchNote();
const parentNote = await fetchNote(currentNote.parentNoteIds[0]);

for (const attr of parentNote.attributes) {
    console.log(attr.type, attr.name, attr.value);
}</code></pre>
  <h3>Creating human-readable URL aliases</h3>
  <p>Shared notes typically have URLs like <code>http://domain.tld/share/knvU8aJy4dJ7</code>,
    where the last part is the note's ID. You can make these URLs more user-friendly
    by adding the <code>#shareAlias</code> label to individual notes (e.g., <code>#shareAlias=highlighting</code>).
    This will change the URL to <code>http://domain.tld/share/highlighting</code>.</p>
  <p><strong>Important</strong>:</p>
  <ol>
    <li>Ensure that aliases are unique.</li>
    <li>Using slashes (<code>/</code>) within aliases to create subpaths is not
      supported.</li>
  </ol>
  <h3>Setting a custom favicon</h3>
  <p>To customize the favicon for your shared pages, create a relation <code>~shareFavicon</code> pointing
    to a file note containing the favicon (e.g., in <code>.ico</code> format).</p>
  <h3>Sharing a note as the root</h3>
  <p>You can designate a specific note or folder as the root of your shared
    content by adding the <code>#shareRoot</code> label. This note will be linked
    when visiting <code>[http://domain.tld/share](http://domain/share)</code>,
    making it easier to use Trilium as a fully-fledged website.</p>
  <aside class="admonition tip">
    <p>Consider combining this with the <code>#shareIndex</code> label, which will
      display a list of all shared notes.</p>
  </aside>
  <h3>Displaying an index of shared notes</h3>
  <p>When accessing a share, the sub-notes will be displayed in a tree on the
    left. But since multiple note trees can be shared, it might be useful to
    display a list of all the different share trees.</p>
  <p>To do so, create a shared text note and apply the <code>shareIndex</code> label.
    When viewed, the list of shared roots will be displayed at the bottom of
    the note.</p>
  <h2>Attribute reference</h2>
  <table>
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>shareHiddenFromTree</code>
        </td>
        <td>this note is hidden from left navigation tree, but still accessible with
          its URL</td>
      </tr>
      <tr>
        <td><code>shareExternalLink</code>
        </td>
        <td>note will act as a link to an external website in the share tree</td>
      </tr>
      <tr>
        <td><code>shareAlias</code>
        </td>
        <td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code>
        </td>
      </tr>
      <tr>
        <td><code>shareOmitDefaultCss</code>
        </td>
        <td>default share page CSS will be omitted. Use when you make extensive styling
          changes.</td>
      </tr>
      <tr>
        <td><code>shareRoot</code>
        </td>
        <td>marks note which is served on /share root.</td>
      </tr>
      <tr>
        <td><code>shareDescription</code>
        </td>
        <td>define text to be added to the HTML meta tag for description</td>
      </tr>
      <tr>
        <td><code>shareRaw</code>
        </td>
        <td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;
          <a
          class="reference-link" href="#root/_help_Qjt68inQ2bRj">Serving directly the content of a note</a>&nbsp;for an alternative method
            without setting an attribute.</td>
      </tr>
      <tr>
        <td><code>shareDisallowRobotIndexing</code>
        </td>
        <td>
          <p>Indicates to web crawlers that the page should not be indexed of this
            note by:</p>
          <ul>
            <li data-list-item-id="e6baa9f60bf59d085fd31aa2cce07a0e7">Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li>
            <li data-list-item-id="ec0d067db136ef9794e4f1033405880b7">Setting the <code>noindex, follow</code> meta tag.</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td><code>shareCredentials</code>
        </td>
        <td>require credentials to access this shared note. Value is expected to be
          in format <code>username:password</code>. Don't forget to make this inheritable
          to apply to child-notes/images.</td>
      </tr>
      <tr>
        <td><code>shareIndex</code>
        </td>
        <td>Note with this label will list all roots of shared notes.</td>
      </tr>
      <tr>
        <td><code>shareHtmlLocation</code>
        </td>
        <td>defines where custom HTML injected via <code>~shareHtml</code> relation
          should be placed. Applied to the HTML snippet note itself. Format: <code>location:position</code> where
          location is <code>head</code>, <code>body</code>, or <code>content</code> and
          position is <code>start</code> or <code>end</code>. Defaults to <code>content:end</code>.</td>
      </tr>
    </tbody>
  </table>
  
<h2>Credits</h2>
  <p>Since v0.95.0, a new theme was introduced (and enabled by default) which
    greatly improves the visual aspect of the Share feature, as well as its
    functionality (such as mobile support, dark/light mode, collapsible tree,
    etc.). This theme is an adaptation of the <a href="https://github.com/zerebos/trilium.rocks">Trilium Rocks!</a> by
    <a
    href="https://github.com/zerebos">zerebos</a>.</p>